<!--
    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
    该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

    回调函数会被传入DOMHighResTimeStamp参数，DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。
    在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，
    单位毫秒，最小精度为1ms(1000μs)。


    requestAnimationFrame 在标签页隐藏时，停止执行，显示后 接着执行
 -->

<style>
	* {
		margin: 0;
	}

	body {
		height: 10000px;
	}

	.box {
		width: 200px;
		height: 200px;
		border: 1px solid red;
		overflow: scroll;
	}

	.content {
		height: 1000px;
		width: 1000px;
	}
</style>
<div class="box" id="box">
	<div class="content"></div>
</div>
<script>
	const element = document.getElementById('box');
	let start;

	function step(timestamp) {
		if (start === undefined) start = timestamp;
		const elapsed = timestamp - start;
		console.log(timestamp,elapsed);
		//这里使用`Math.min()`确保元素刚好停在200px的位置。
		element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
		if (elapsed < 2000) {
			// 在两秒后停止动画
			window.requestAnimationFrame(step);
		}
	}

	window.requestAnimationFrame(step);
</script>
